Advanced Formatting
Colours Let's start by changing the colour of text. This tutorial can already be found on the Beginner Coding page, so this will only be a brisk refresher. The standard structure for colouring is this: Where colour appears is where you should type the colour you want, which you can do by simply typing the name of the colour, e.g. "red", or typing "#" followed by the hexadecimal code for that colour, e.g. "6F92AE". Obviously just typing names is easier, but using hexadecimal codes allows you to use custom colours rather than just the predefined colours. So for example, the code Pineapple turns "Pineapple" into: "Pineapple" If you're really good, you can even make a rainbow. Buttons You probably know about links already, but another way to link to pages is to create buttons. To create a button, you type this: on button Replace the on button with the text you want to appear. For example, if you want the button to say "Hello world!" you type this: Hello world! And it will turn into this: Hello world! That button is pretty much useless. You can actually make the button link somewhere by typing a link, like this: Beginner Coding And that will turn into this: Beginner Coding As always, you can do ANYTHING you want inside the link, like renaming it. Coding Sandbox Dos and Don'ts Font Styles There are four different font styles here on Wikia: bold, italic, underline, and strikethrough. Wikia has a built-in function for the first two, plus you're more likely to use these two, so we'll go through those first. Bold & Italic To make a string of text bold, all you have to do is type three separate apostrophes (' ' ') on each side of the text. Simple. If we take the string "banana phone" and type ' ' 'banana phone' ' ' , the string becomes: banana phone In HTML, the same effect can be achieved using the tag, Italicising a string of text is very much similar, but instead of typing three apostrophes (' ' '), we type two (' '). These are not to be confused with speech marks (") - they are two separate apostrophes. If we take the string "banana phone" again and type ' 'banana phone' ' , it becomes: banana phone The tag for doing this in HTML is . If you want to use combined bold and italic text, just do the obvious math: 2 + 3 = 5! With a full five apostrophes, taking the string "banana phone" once more, we can type ' ' ' ' 'banana phone' ' ' ' ' and it'll become: banana phone IMPORTANT NOTE: The apostrophes in the examples are spaced out for easier reading. Don't put spaces between the apostrophes when actually doing this. Underline & Strikethrough Underlining takes a little bit of code to perform, since Wikia doesn't have a native function for it. Instead, we use a HTML function, like we did with . This time, however, it's a lot easier. The code is going to look something like this: Sample Text To underline, we just use the above code as it is, obviously replacing "Sample Text". To strikethrough, we replace and with and . Let's take the string "Clown Party" as our example. If we want to underline it so that it looks like: Clown Party we should type: Clown Party Likewise, if we want to strike through it so it looks like: Clown Party we should type: Clown Party The two can also be combined like this: Clown Party> which gives you this: Clown Party If you do use both, it's important to make sure that whichever way around you place the tags at the start, you place them in reverse order at the end. Using Clown Party will not work. Font families/faces Normally us humans call changing the style of text "changing font" (e.g. Comic Sans, Times New Roman etc.), but that can be pretty awkward when we're coding because the whole tag is called "font". Fortunately, Wikia uses the more technically accurate name for a font, the typeface (or just the face), so confusion is avoided. To change the typeface of text, we use: Sample Text. Simple, really. As with earlier examples, simply replace face with whatever typeface you choose. For example, if I wanted to change the face of the text "this text looks fancy" to Fantasy, I'd type this: this text looks fancy which would look like this: this text looks fancy Below is a table of faces that Wikia supports (or at least I think it does). NOTE: If some of the face examples just look the same as the others, that's because either whatever browser or device you're using simply doesn't know what that face is, or I'm just stupid and Wikia doesn't actually support it. If the same face doesn't show up properly on a desktop, laptop or notebook, it probably needs removing, so let me know ASAP. (You can click my name at the bottom of this article, in my signature.) If it doesn't show up properly on a tablet or somesuch, it's less urgent, but still useful, so let me know anyway. (P.S. Wikia's standard typeface is Helvetica. It's not included in the table, for obvious reasons. If you don't get the reason, it's because this font is the default font.) Combinations Multiple attributes can be defined in one tag to avoid clutter. Doing this is relatively simple: That's it - you literally just put them next to each other in the tag, with a space between. As an example, let's say I wanted to take the phrase "Hats are awesome.", make the typeface Fantasy and turn the text dark red. I'd type this: Hats are awesome. The above code creates this: Hats are awesome. Don't forget bolding, italicising, underlining and strike-throughs can be wrapped around anything without disturbing the code. Hats are awesome. I did the above by typing this: Hats are awesome. Confused? Don't worry about it. Just keep looking through until you get it, and if that doesn't work, just ask AXBOIvsWIKIA (who wrote this article) or anyone else on this site, who will all be happy to help you. If I've missed something major out, just tell me and I'll fix it. Practice makes perfect! There are two sandboxes dedicated to practicing. Category:Pages Category:Tutorials Category:Information Category:Coding Category:HTML